<template>
  <div>
    <v-group ref="taskLine">
      <v-path
        :config="{
          data: genCurve(startPoint, endPoint),
          stroke: '#707070',
          strokeWidth: 1,
        }"
      />
      <v-circle
        ref="movingPoint"
        :config="{
          x: startPoint[0],
          y: startPoint[1],
          radius: 2,
          fill: '#b3faf6',
          shadowColor: '#35fff4',
          shadowBlur: 5,
        }"
      />
    </v-group>
  </div>
</template>

<script>
export default {
  props: {
    startPoint: {
      type: Array,
      default: function () {
        return [50, 200];
      },
    },
    endPoint: {
      type: Array,
      default: function () {
        return [350, 100];
      },
    },
  },
  mounted() {
    this.animateMovingPoint();
  },
  methods: {
    genCurve(p1, p2) {
      const [x1, y1] = p1;
      const [x2, y2] = p2;

      const mid = x1 + (x2 - x1) / 1.2;
      const a1 = [mid, y1];
      const a2 = [mid, y2];

      const d = `M${p1} C${a1[0]},${a1[1]} ${a2[0]},${a2[1]} ${p2}`;
      return d;
    },
    animateMovingPoint() {
      const path = new Konva.Path({
        data: this.genCurve(this.startPoint, this.endPoint),
      });
      const pathLength = path.getLength();

      const animation = new Konva.Animation((frame) => {
        const distance = frame.time * 0.08; // 调整移动速度

        if (distance >= pathLength) {
          animation.stop();
          this.resetMovingPoint();
          this.animateMovingPoint();
        } else {
          const point = path.getPointAtLength(distance);
          this.updateMovingPoint(point);
        }
      });

      animation.start();
    },
    updateMovingPoint(point) {
      this.$refs.movingPoint.getNode().x(point.x);
      this.$refs.movingPoint.getNode().y(point.y);
    },
    resetMovingPoint() {
      this.$refs.movingPoint.getNode().x(this.startPoint[0]);
      this.$refs.movingPoint.getNode().y(this.startPoint[1]);
    },
  },
};
</script>

<style lang="scss" scoped></style>
